<template>
	<gui-page :customHeader="true" isHeaderSized headerClass="gui-bg-primary">
		<template v-slot:gHeader>
			<view class="gui-margin">
				<gui-search @inputting="inputting" @confirm="confirm" placeholder="请输入客户名称/手机号"></gui-search>
			</view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>

			<view class="gui-padding">

				<view class=" page-main">
					<view class="item gui-bg-white gui-border-radius-large gui-padding"
						v-for="(item,index) in customerList" :key="index" style="margin-bottom: 20rpx;">
						<view class="top gui-flex gui-space-between gui-align-items-center">

							<view class="left gui-flex1">
								<view class="name  gui-flex gui-align-items-center gui-justify-content-start">
									<view class="name_text gui-block gui-bold gui-h4"
										style="height: 55rpx; line-height: 40rpx;  padding-right: 20rpx;">
										{{item.cusName}}
									</view>
									<gui-tags text="分" :size="22"
										:customClass="['gui-bg-red','gui-color-white']"></gui-tags>
									<gui-tags text="已拨打" :size="22" v-if="item.isdail==1"></gui-tags>
									<gui-tags v-else :size="22" :customClass="['gui-bg-red','gui-color-white']" text="未拨打"></gui-tags>
								</view>

								<view class="phone">
									<text
										class="gui-text gui-color-black">{{item.phone.substring(0,3)}}****{{item.phone.substring(7,11)}}</text>
								</view>
							</view>

							<view class="right gui-flex gui-space-between gui-align-items-center">
								<view class="phone_ico" @click="call(item.phone)">
									<text class="gui-icons">&#xe60c;</text>
								</view>
								<view class="text-ico">
									<text class="gui-icons">&#xe624;</text>
								</view>
							</view>

						</view>

						<view class="main gui-flex gui-wrap ">

							<view class="item gui-text gui-color-gray">
								<text class="lable">来源：</text>
								<text class="value">{{item.laiyuan}}</text>

							</view>
							<view class="item gui-text gui-color-gray">
								<text class="lable">金额：</text>
								<text class="value">{{item.amount}}</text>

							</view>
							<view class="item gui-text gui-color-gray">
								<text class="lable">车牌：</text>
								<text class="value">{{item.carNo}}</text>

							</view>
							<view class="item gui-text gui-color-gray">
								<text class="lable">品牌：</text>
								<text class="value">{{item.carModel}}</text>

							</view>
							<view class="item gui-text gui-color-gray">
								<text class="lable">车状态：</text>
								<text class="value">{{item.carStatus}}</text>

							</view>
							<view class="item gui-text gui-color-gray">
								<text class="lable">星级：</text>
								<text class="value">{{item.level}}</text>
							</view>
						</view>


						<view class="item gui-text gui-color-gray">
							<text class="lable">进线时间：</text>
							<text class="value">{{item.receiveTime}}</text>
						</view>
						<view class="main gui-text gui-color-gray">
							<text class="lable">备注信息：</text>
							<text class="value">{{item.remark}}</text>
						</view>


						<!-- <view class="footer">
							<view class="last_time gui-flex gui-space-between">
								<text class="gui-text">最后跟进:{{item.endTime}}</text>
								<text class="gui-text gui-icons">&#xe69d;</text>
							</view>

							<view class="text-box  gui-border-radius-large">
								<textarea :value="item.genjin" :maxlength="200" placeholder="" class="textarea-class" />
							</view>


							<view class="btn-box gui-flex gui-space-between gui-align-items-center">
								<button type="default" :plain="true" class="gui-button"
									style="border-color:#0454f9 !important;">
									<text class="gui-button-text gui-icons" style="color:#0454f9;">&#xe6c7; 进件</text>
								</button>

								<button type="default" :plain="true" class="gui-button"
									style="border-color:#0454f9 !important;" @tap="goYusheng">
									<text class="gui-button-text gui-icons" style="color:#0454f9;">&#xe6c7; 预审</text>
								</button>

								<button type="default" :plain="true" class="gui-button"
									style="border-color:#0454f9 !important;">
									<text class="gui-button-text gui-icons" style="color:#0454f9;">&#xe6c7; 转公海</text>
								</button>

								<button type="default" :plain="true" class="gui-button"
									style="border-color:#f00 !important;">
									<text class="gui-button-text gui-icons" style="color:#f00;">&#xe7a5; 拉黑</text>
								</button>
							</view>


						</view> -->

					</view>
				</view>

			</view>

			<!-- 预审 -->

			<gui-popup ref="yusheng" position="bottom">
				<view class="gui-bg-white gui-padding">
					<view class="gui-relative ">
						<form @submit="submit">
							<view class="gui-margin-top gui-padding-x">
								<text class="gui-h6 gui-secondary-text gui-bold">预审</text>
							</view>
							<view style="height:28rpx;"></view>
							<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">用户姓名</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入姓名" />
									</view>
								</view>

								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">联系电话</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入联系电话" />
									</view>
								</view>

								<view class="gui-form-item gui-border-b">
									<text class="gui-form-label gui-secondary-text">预审金额</text>
									<view class="gui-form-body">
										<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
											placeholder="请输入预审金额" />
									</view>
								</view>




							</view>

							<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
								<view style="padding-top:20rpx;">
									<text class="gui-text-small gui-color-gray">填写描述</text>
								</view>
								<view style="padding:15rpx 0;">
									<textarea v-model="formData.name5" name="name5" placeholder="说点什么..."
										class="gui-textarea gui-bg-gray gui-padding-small gui-dark-bg-level-1"
										style="width:690rpx;"></textarea>
								</view>

							</view>
							<view
								class="gui-margin-top gui-flex gui-row gui-nowrap gui-justify-content-end gui-padding-x">
								<button type="default" class="gui-button gui-bg-primary gui-noborder"
									style="width:200rpx;" formType="submit">
									<text class="gui-icons gui-color-white gui-button-text">&#xe642; 提交</text>
								</button>
							</view>
							<view style="height:60rpx;"></view>
						</form>
					</view>
					<!-- iphone 底部适配 -->
					<gui-iphone-bottom :customClass="['gui-bg-white', 'gui-dark-bg-level-3']"></gui-iphone-bottom>
				</view>
			</gui-popup>



		</template>
	</gui-page>
</template>
<script>
	import index from "@/api/index.js"
	import customer from "@/api/customer.js"
	export default {
		data() {
			return {

				// 表单数据存储
				formData: {
					name1: '',
					name2: '',
					name3: '',
					name4: '',
				},
				// 密码可视 类型切换
				isPwd: true,
				// picker 
				gender: ['请选择性别', '男', '女'],
				genderIndex: 0,
				customerList: '',
			}
		},
		onLoad: function() {
			this.getList();
		},
		methods: {
			getList() {
				customer.getMyCustomerList().then(res => {
					this.customerList = res.data.list;
				})
			},
			goYusheng() {
				this.$refs.yusheng.open();
			},
			call(phone) {
				console.log('传入的电话', phone);
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: phone,
						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [phone, '呼叫'],
						success: function(res) {
							console.log(res);
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: phone,
									success() {
										console.log('拨打成功了');
									},
									fail() {
										console.log('拨打失败了');
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.right {

		.phone_ico,
		.text-ico {
			margin: 20rpx;
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			border-radius: 50%;
		}

		.phone_ico {
			background-color: #0eb05f;
		}

		.text-ico {
			background-color: #ff5733;
		}
	}

	.main {
		padding: 10rpx 0;

		.item {
			width: 50%;
			padding: 5rpx 0rpx;
		}
	}

	.footer {
		border-top: 1px dashed #eee;
		margin-top: 20rpx;
	}

	.last_time {
		padding: 20rpx 0;
	}

	.text-box {
		margin-top: 15rpx;
		position: relative;
		background-color: #f5f5f5;
		width: 100%;
		min-height: 60px;
		padding: 20rpx;
		box-sizing: border-box;

		.textarea-class {
			color: #444;
			font-size: 26rpx;
			width: 100%;
			height: 60px;
		}
	}

	.text-box::after {
		position: absolute;
		content: "";
		width: 16px;
		height: 16px;
		background-color: #f5f5f5;
		top: -8px;
		transform: rotate(45deg);
		border-radius: 4rpx;
		left: 40rpx
	}

	.btn-box {
		margin-top: 20rpx;

		.gui-button {
			width: 140rpx;
			height: 60rpx !important;
			line-height: 50rpx !important;
			;
		}

		.gui-button-text {
			margin: 0px !important;
			padding: 0 !important;
			font-weight: bold;
			line-height: 50rpx !important;
			font-size: 24rpx;
		}
	}
</style>